<template >
    <div :style="{'text-align':'left','height':$store.state.clientHeight+'px','background':'#eee'}">
        <el-row style="height: 120px;  display:table-cell; vertical-align:bottom;" >
            <div class="erp_title">summer-qiankun-admin</div>
            <div class="erp_remark">demo</div>
        </el-row>
        <el-row class="login_area"  >
            <el-col :span="12">
                &nbsp;
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="login_title">
                        <span>LOGIN 用户登录</span>
                    </div>
                    <el-form ref="formRef" :model="form" :rules="rules"  label-width="100px" >
                        <el-row  >
                            <el-form-item label="登录名"  prop="loginName">
                                <el-input v-model="form.loginName" @focus="clean" class="login_input"></el-input>
                            </el-form-item>
                        </el-row>

                        <el-row  style="margin:15px 0px 15px 0px">
                            <el-form-item label="密码"  prop="loginPwd" >
                                <el-input type="password" v-model="form.loginPwd" @focus="clean"  class="login_input"></el-input>
                            </el-form-item>
                        </el-row>

                        <el-row style="text-align: right;margin: 0px 0px 10px 0px" >
                            <el-button style="width: 100%" type="primary" size="medium" @click="submitLogin">立即登录</el-button>
                        </el-row>

                        <el-row style="height: 30px" >
                            <el-alert v-if="isError" :title="errorMsg" type="error"></el-alert>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="erp_bottom"  >
            Copyright©2004-2022 zhanghlucky@163.com
        </el-row>
    </div>
</template>
<script>
    export default {
        name:'loginPage',
        components: {

        },
        data() {
            return {
                form:{
                    loginName:null,
                    loginPwd:null,
                    serverTime:null,
                },
                rules: {
                    loginName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    loginPwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
                isError:false,
                errorMsg:'',
            }
        },
        created() {

        },
        mounted() {
        },
        methods: {
            submitLogin(){
                this.$store.commit('setToken', 'tokendata10000001');
                this.$router.push({ path: '/home' })
            },
            clean(){
                this.isError=false;
                this.errorMsg='';
            }
        }
    }
</script>

<style>
    body{

    }

    .erp_title{
        font-size: 24px;
        color: #555;
        margin:0px 0px 0px 250px;
    }
    .erp_bottom{
        font-size: 12px;
        color: #555;
        margin:10px 100px 0px 0px;
        text-align: right;
    }
    .erp_remark{
        font-size: 12px;
        color: #666;
        margin:0px 0px 10px 250px;
    }
    .login_title{
       font-size: 14px;
        font-weight: bold;
    }
    .login_area{
        height: 400px;
        padding: 40px 0px 30px 0px;
        background: url("../assets/img/login_bg.jpeg") no-repeat;
        background-position:center;
    }
    .input_label{
        text-align: right; padding:10px 10px 0px 0px
    }
    .login_input .el-input__inner{
        line-height:35px !important ;height: 35px !important;
    }
    .box-card {
        width: 450px;
    }
</style>
